import { run } from '@cycle/run';
import { div, label, input, hr, h1, makeDOMDriver } from '@cycle/dom';
import React, { useEffect, useRef } from 'react';

function main(sources: any) {
  const input$ = sources.DOM.select('.field').events('input')

  const name$ = input$.map((ev: any) => ev.target.value).startWith('')

  const vdom$ = name$.map((name: string) =>
    div([
      label('Name:'),
      input('.field', { attrs: { type: 'text' } }),
      h1('Hello ' + name),
    ])
  )

  return { DOM: vdom$ }
}

export default function C1() {
  const ref = useRef<HTMLDivElement>(null);
  useEffect(() => {
    if (ref.current) {
      run(main, { DOM: makeDOMDriver(ref.current) })
    }
  })
  return (
    <div ref={ref}></div>
  )
}
